<template>
    <div class="background-container">
        <div ref="graphContainer" id="graph-container"></div>      
    </div>
  </template>
  
  <script>
  import G6 from '@antv/g6';
  import customNodeImage from '@/views/query/node.png'; // 确保路径正确
  import { inject, onMounted, ref } from 'vue';
  
  export default {
    name: 'GraphComponent',
    setup() {
      const graphData = inject('graphData');
      const graphContainer = ref(null);
  
      onMounted(() => {
        const graph = new G6.Graph({
          container: graphContainer.value,
          width: graphContainer.value.offsetWidth,
          height: graphContainer.value.offsetHeight,
          defaultNode: {
            type: 'image',
            size: [120, 130], // 图片节点的大小
            img: customNodeImage
          },
          defaultEdge: {
            style: {
              endArrow: true
            }
          },
          modes: {
            default: ['drag-canvas', 'zoom-canvas', 'drag-node']
          },
        });
  
        graph.data({
          nodes: graphData.nodes,
          edges: graphData.edges
        });
        graph.render();
  
        const handleResize = () => {
          graph.changeSize(graphContainer.value.offsetWidth, graphContainer.value.offsetHeight);
        };
  
        window.addEventListener('resize', handleResize);
  
        // Cleanup on unmount
        onBeforeUnmount(() => {
          window.removeEventListener('resize', handleResize);
          if (graph) {
            graph.destroy();
          }
        });
      });
  
      return {
        graphContainer
      };
    },
  };
  </script>
  
  <style scoped>
  .background-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-image: url('res.png');
  background-attachment: fixed;
  background-size: 100vw,100vh;
  background-position: center;
  background-repeat: no-repeat;
  }
  
  #graph-container {
    width: 100%;
    height: 100vh;
    
  }
  </style>